{% import 'macro.html' as M  %}
<script src="/static/parsley.min.js"></script>
<style>
  #tblviewtaxon {width: 100%}
  #tblviewtaxon th {width: 100px;font-weight: normal;background-color: #EEE;}
  #tblviewtaxon td {word-break: break-all; padding: 3px 5px}
  #At2PopupWindow0 .At2PopupWindow {width: 1000px;}
  #taxostatus {width:150px;}
</style>
<form id="formedittaxon" method="post" action="?">
<input type="hidden" name="id" value="{{ taxon.id }}">
<table class=" " id="tblviewtaxon">
  <tr>  <th>Name</th><td colspan="3">{{ M.InputText('name',taxon.name,"class=form-control required maxlength=100") }}</td>
    <th>Type</th><td style="width: 200px;">
      {{ M.selectinputdict('taxotype', g.TaxoType, taxon.taxotype,addemptyrow=True,extrataginfo="class=form-control required")  }}</td>
  </tr>
  <tr>  <th>Display Name</th><td colspan="5">{{ taxon.display_name }}</td>

  </tr>
  <tr>
    <th>Parent ID</th><td colspan="5">
      <select id="parent_id" name="parent_id" class="taxolbpop" required>
        {% if taxon.parent_id %}
        <option value="{{ taxon.parent_id }}">{{ taxon.parentname }}</option>
        {% endif %}
      </select>
     </td>
  </tr>
  <tr>  <th>Lineage</th><td colspan="5">{{ taxon.tree }}</td></tr>

  <tr>
    <th>Source ID</th><td>{{ M.InputText('id_source', taxon.id_source ,extrataginfo="class=form-control maxlength=20 style='width:100px'"|safe)  }} </td>
    <th>Source URL</th><td colspan="3">
        {{ M.InputText('source_url', taxon.source_url,extrataginfo="class=form-control maxlength=200  data-parsley-type=url")  }}    </td></tr>
  <tr><th>Source Desc</th><td colspan="5">
    {{ M.TextArea('source_desc',4, taxon.source_desc,extrataginfo="class=form-control maxlength=1000 ")  }}
    </td></tr>
  <tr>
    <th>Creation date</th><td>
        {{ M.InputText('creation_datetime', taxon.creationdatetimefmt ,extrataginfo="class=form-control maxlength=200 pattern='\d{4}-\d{1,2}-\d{1,2} \d{1,2}:\d{1,2}' style='width:150px'"|safe)  }} </td>
    <th>By</th><td colspan="3">
    {{ M.InputText('creator_email', taxon.creator_email ,extrataginfo="class=form-control maxlength=250 data-parsley-type=email "|safe)  }}
    </td></tr>
  <tr>
    <th>From instance</th><td>{{ taxon.id_instance or ''}}</td>
    <th>Name</th><td colspan="3">{{ ('<a href="'+taxon.inst_url+'">'+taxon.inst_name+'</a>')|safe if taxon.inst_name else '' }}</td></tr>
  <tr>
    <th>Status</th><td>{{ M.selectinputdict('taxostatus',g.TaxoStatus, taxon.taxostatus,extrataginfo="class=form-control required ")}}</td>
    <th>Rename To</th><td colspan="3" style="white-space: nowrap;">
      <select id="rename_to" name="rename_to" class="taxolbpop">
        {% if taxon.rename_to %}
        <option value="{{ taxon.rename_to }}">{{ taxon.rename_to_name }}</option>
        {% endif %}
      </select>&nbsp;<span onclick="$('#rename_to').val(null).trigger('change');" style="cursor: pointer;color: #2b669a;">clear</span>


  </td></tr>

</table>
<table style="width: 100%;margin-top: 10px;">
  <tr><td>
    <button type="button" class="btn btn-primary" onclick="CheckNaming();"><i class="fa fa-check"></i> Check naming rules</button>
    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Save Taxon</button>
  </td>
    <td style="text-align: right"><button type="button" onclick="At2PopupClose(0);" class="btn btn-gris"><i class="fa fa-times"></i> Close</button></td></tr>
</table>
</form>
<div id="formedittaxon_PostResult" style="margin-top: 10px"></div>
<div class="panel panel-warning" style="padding: 5px;background-color: #fcf8e3;">
As taxonomy manager, there is no control on the names of the new categories. It is thus recommended that you create new catégories with the greatest care.
<br>Default rules for categroy names :
<ul>
<li>Phylo type : Must be unique, contains only letters and -+' and not more than 1 whitespace, Start with a Uppercase</li>
<li>Morpho type : Must be unique for the parent, contains only letters and -+' and not more than 1 whitespace, be lowercase only.</li>
</ul>
</div>

<style>
  .taxolbpop {width: 400px;}
</style>
<script>
  $(".taxolbpop").select2({
        ajax: {
            url: "/search/taxo",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 3
        /*,allowClear:true know bug on it #5394*/
    }); // Select2 Ajax
  $('#formedittaxon').parsley();


  $('#formedittaxon').submit(function(e){
    e.preventDefault();
    var DejaCliqued=$(this).data('DejaCliqued');
    $(this).data('DejaCliqued','Y');
    if(DejaCliqued==='Y')
      return;
    setTimeout(function(){ $('#formedittaxon').data('DejaCliqued','N'); }, 5000);
    var formobj=objectifyForm('formedittaxon');
{#    $("#formedittaxon_PostResult").load('/browsetaxosavepopup/',formobj);#}
    AtdSetWaitAndLoad("#formedittaxon_PostResult",'/browsetaxosavepopup/',formobj);
  });
  function CheckNaming() {
    var formobj=objectifyForm('formedittaxon');
    formobj.updatetarget='{{ taxon.id }}';
    AtdSetWaitAndLoad("#formedittaxon_PostResult",'/checktaxonHTML/',formobj);
  }

</script>